// 背景图片 自动匹配2x、3x图
bg-image($url)
    background-image: url($url + "@2x.png")
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
        background-image: url($url + "@3x.png")

over-height()
    @media screen and (min-height: 700px)
        margin-top: 70px

border-1px($color = #ccc, $radius = 2PX, $style = solid)
    &::after
        content: ""
        pointer-events: none
        display: block
        position: absolute
        left: 0
        top: 0
        transform-origin: 0 0
        border: 1PX $style $color
        border-radius: $radius
        box-sizing border-box
        width 100%
        height 100%
        @media (min-resolution: 2dppx)
            width: 200%
            height: 200%
            border-radius: $radius * 2
            transform: scale(.5)
        @media (min-resolution: 3dppx)
            width: 300%
            height: 300%
            border-radius: $radius * 3
            transform: scale(.333)

border-btm($color = #ccc, $radius = 2PX, $style = solid)
    &::after
        content: ""
        pointer-events: none
        display: block
        position: absolute
        left: 0
        bottom: 0
        transform-origin: 0 0
        border: 1PX $style $color
        border-radius: $radius
        box-sizing border-box
        width 100%
        height 100%
        @media (min-resolution: 2dppx)
            width: 200%
            height: 200%
            border-radius: $radius * 2
            transform: scale(.5)
        @media (min-resolution: 3dppx)
            width: 300%
            height: 300%
            border-radius: $radius * 3
            transform: scale(.333)


// 不换行 超出部分为...
no-wrap()
    text-overflow: ellipsis
    overflow: hidden
    white-space: nowrap

// 通过伪类扩展点击区域
extend-click()
    position: relative
    &:before
        content: ''
        position: absolute
        top: -10px
        left: -10px
        right: -10px
        bottom: -10px


mask()
    &::before
        content: ''
        position: fixed
        left: 0
        right: 0
        top: 0
        bottom: 0
        background: $color-background-d
        opacity: .5